﻿@model WebExtras.DemoApp.Models.Mvc.CoreFormViewModel

@{
  ViewBag.Title = "Mvc JQuery UI Form Helper Extensions";
}

<h3 class="keep-center">Mvc Form Helper Extensions</h3>

<div class="col-group">
  <div class="col-6">
    <div class="col-12">
      <div class="col-3">
        <strong>Assembly</strong>
      </div>
      <div class="col-4">
        WebExtras.Mvc.dll
      </div>
    </div>
    <div class="col-12">
      <div class="col-3">
        <strong>Namespace</strong>
      </div>
      <div class="col-4">
        WebExtras.Mvc.Core
      </div>
    </div>
  </div>
  <div class="col-offset-6">
    <div class="col-4">
      <strong>Dependancies</strong>
    </div>
    <div class="col-6">
      <ul class="dependancies">
        <li>Appropriate third party libraries</li>
        <li>webextras.jqueryui.css</li>
      </ul>
    </div>
  </div>
</div>

<div class="ui-well">
  <h4>Date time pickers</h4>
  <p>
    WebExtras provides helper methods for rendering a date time picker attached to a textbox by using a 
    great little date time picker provided by Trent Richarson. You can get a copy of the date time picker from 
    @Html.Hyperlink("here", "http://trentrichardson.com/examples/timepicker/", new { target = "_blank" }).
  </p>
  <p>Markup</p>
  <pre><code>
<span class="comment">// By default date format is 'yy-mm-dd' (in JS) == 'yyyy-MM-dd' (in C#)</span>
@@Html.DateTextBoxFor(f => f.DateTextBox, 
    new { showOn = "button", buttonImage = "/content/calendar.gif", buttonImageOnly = true })
    
<span class="comment">// By default time format is 'hh:mm' (in JS) == 'hh:mm' (in C#)</span>
@@Html.TimeTextBoxFor(f => f.TimeTextBox)
    
<span class="comment">// By default date time format is 'yy-mm-dd hh:mm' (in JS) == 'yyyy-MM-dd hh:mm' (in C#)</span>
@@Html.DateTimeTextBoxFor(f => f.DateTimeTextBox, 
    new { showOn = "button", buttonImage = "/content/calendar.gif", buttonImageOnly = true })
  </code></pre>
  <p>Output</p>
  <div class="col-group keep-center">
    <div class="col-3">
      <div class="content">
        <p>Date only picker</p>
        
        @Html.DateTextBoxFor(f => f.DateTextBox, new
        {
          showOn = "button",
          buttonImage = "/content/img/calendar.gif",
          buttonImageOnly = true
        })
      </div>
    </div>
    <div class="col-3 col-offset-1">
      <div class="content">
        <p>Time only picker</p>
        
        @Html.TimeTextBoxFor(f => f.TimeTextBox)
      </div>
    </div>
    <div class="col-3 col-offset-1">
      <div class="content">
        <p>Date time picker</p>
        
        @Html.DateTimeTextBoxFor(f => f.DateTimeTextBox, new
        {
          showOn = "button",
          buttonImage = "/content/img/calendar.gif",
          buttonImageOnly = true
        })
      </div>
    </div>
  </div>

</div>


